<!DOCTYPE html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
  <title>demo lazyload</title>
  <meta charset="utf-8">
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
      text-decoration: none;
      list-style: none;
    }
    .lazyload img {
        width: 640px;
      }
      .lazyload{
        width: 700px;
        margin: 0 auto;
        text-align: center;
      }
    @media screen and (max-width: 980px) {
      .lazyload img {
        width: 100%;
        height: 480px;

      }
      .lazyload{
        width: 100%;
        margin: 0 auto;
        text-align: center;
      }
    }
  </style>
</head>
<body>
<div class="lazyload">
  <div>
  <ul>
    <li class="item">
      <a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>
    </li>
    <li class="item">
      <a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher2.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>
    </li>
    <li class="item">
      <a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher3.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>
    </li>
    <li class="item">
      <a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher4.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>
    </li>
    <li class="item">
      <a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher5.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>
    </li>
    <li class="item">
      <a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher6.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>
    </li>
    <li class="item">
      <a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher7.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>
    </li>
    <li class="item">
      <a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher8.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>
    </li>
    <li class="item">
      <a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher9.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>
    </li>
  </ul>
  </div>
</div>


<script type="text/javascript">
var lazyLoad = (function(){
  var clock;
  
  function init(){
    $(window).on("scroll", function(){
      if (clock) {
        clearTimeout(clock);
      }
      clock = setTimeout(function(){
        checkShow();
      }, 200);
    })
    checkShow();
  }
  
  function checkShow(){
    $(".lazyload img").each(function(){
      var $cur =$(this);
      if($cur.attr('isLoaded')){
            return;
          }
      if(shouldShow($cur)){
        showImg($cur);
      }
    })
  }
  function shouldShow($node){
    var scrollH = $(window).scrollTop(),
      winH = $(window).height(),
      top = $node.offset().top;
    if(top < winH + scrollH){
        return true;
      }else{
        return false;
      }
  }
  function showImg($node){
      $node.hide()
      $node.attr('src', $node.attr('data-img'));
      $node.fadeIn()
      $node.attr('isLoaded', true);

  }
  return {
    init: init
  }
})()
lazyLoad.init();
</script>
</body>
</html>